<template>
    <div class="editApplyBank">
      <el-form :model="editApplyBankForm" :rules="editApplyBankRules" v-loading="editApplyBankLoading" label-width="100px" ref="editApplyBankRefs" class="editApplyBankCls">
        <el-form-item label="持卡人姓名：">
          <el-input v-model="editApplyBankForm.account" type="text" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="提现金额：" prop="price">
          <el-input v-inputFloat v-model="editApplyBankForm.price" type="text" placeholder="请输入提现金额"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号：">
          <el-input v-model="editApplyBankForm.bankCode" type="text" placeholder="请输入银行卡号"></el-input>
        </el-form-item>
        <el-form-item label="开户行：">
          <el-input v-model="editApplyBankForm.bankName" type="text" placeholder="请输入开户行"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="editApplyBankForm.remark" type="textarea" placeholder="请输入备注"></el-input>
        </el-form-item>
        <div class="subBtnWid">
          <el-button size="small" type="primary" @click="subEditApplyBank('editApplyBankRefs')" :loading="loadingBtn">提交</el-button>
        </div>
      </el-form>
    </div>
</template>

<script>
  import {
    getAppointApplyListApi,
    putApplyCreatApi
  } from '@/api/financial';

  export default {
    name: "index",
    props: {
      id: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        editApplyBankLoading: false,
        loadingBtn: false,
        editApplyBankRules: {
          price: [
            { required: true, message: '请填写提现金额', trigger: 'blur' }
          ]
        },
        editApplyBankForm: {
          account: '',
          price: '',
          bankCode: '',
          bankName: '',
          remark: ''
        },
        editApply: {}
      }
    },
    mounted() {
      this.getAppointApplyList();
    },
    methods: {
      /**
       * 编辑
       */
      subEditApplyBank(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$set(this, 'loadingBtn', true);
            putApplyCreatApi(this.id, {
              type: this.editApply.type,
              account: this.editApplyBankForm.account,
              bankName: this.editApplyBankForm.bankName,
              bankCode: this.editApplyBankForm.bankCode,
              price: this.editApplyBankForm.price,
              qrcode: this.editApply.qrcode,
              remark: this.editApplyBankForm.remark
            }).then(res => {
              this.$message.success('编辑成功');
              this.$emit('getApplyCreat');
              this.$emit('close');
              this.$set(this, 'loadingBtn', false);
            }).catch(() => {
              this.$set(this, 'loadingBtn', false);
            });
          } else {
            console.log('error submit!!');
            return false;
          };
        });
      },
      /**
       * 获取指定提现记录
       */
      getAppointApplyList() {
        this.$set(this, 'editApplyBankLoading', true);
        getAppointApplyListApi(this.id).then(res => {
          this.$set(this, 'editApplyBankForm', {
            account: res.account,
            price: res.price,
            bankCode: res.bankCode,
            bankName: res.bankName,
            remark: res.remark
          });
          this.$set(this, 'editApply', res);
          this.$set(this, 'editApplyBankLoading', false);
        }).catch(() => {
          this.$set(this, 'editApplyBankLoading', false);
        });
      }
    }
  }
</script>

<style scoped>

</style>
